<template>

  <el-row class="blog-container">
    <el-col :span="3">&nbsp;</el-col>
    <!-- 左侧-博客列表展示 -->
    <el-col :span="rightToolVisible ? 13 : 18" class="b-left">
      <!-- 列表标题 -->
      <div class="b-header">
        <div class="b-h-left">
          <span class="title">
            博客列表
          </span>
        </div>
        <div class="b-h-right">
          <span @click="blogSortHandle(0)" class="sort-item" :class="{'active': blogSortIndex === 0, 'load': dataLoad}">
            最新
          </span>
          <span @click="blogSortHandle(1)" class="sort-item" :class="{'active': blogSortIndex === 1, 'load': dataLoad}">
            浏览最多
          </span>
          <span @click="blogSortHandle(2)" class="sort-item" :class="{'active': blogSortIndex === 2, 'load': dataLoad}">
            点赞最多
          </span>
          <el-tooltip effect="light" :content="rightToolTitle" placement="top">
            <svg-icon @click="rightToolHandle" icon-class="up-arrow"
                      :class="rightToolVisible ? '' : 'active'" class="arrow-icon-right" />
          </el-tooltip>
        </div>
      </div>

      <div class="b-list">

        <el-skeleton :loading="dataLoad" :rows="17" :throttle="200" animated>
          <template>

            <el-card shadow="hover" v-for="blog in blogList" :key="'blog' + blog.blogId" @click.native="toBlogDetailHandle(blog.blogId)" class="blog">
                <!-- 博客描述内容 -->
                <div class="b-content">
                  <div class="b-c-title">
                    <svg-icon v-if="blog.isHot === 0" icon-class="hot" class="hot-blog-icon" />
                    <svg-icon v-if="blog.isElite === 0" icon-class="elite" class="elite-blog-icon" />

                    <span class="title">{{ blog.title }}</span>
                  </div>
                  <div class="b-c-preface">
                    {{ blog.preface }}
                  </div>
                  <div class="b-c-other">
                    <svg-icon icon-class="user2" class="fz14"/>
                    <span class="author-name">{{ blog.userName }}</span>

                    <svg-icon icon-class="label" class="ml10 fz14" style="color: rgb(248,168,168)" />
                    <span>{{ blog.label === 0 ? '原创' : blog.label === 1 ? '转载' : '翻译' }}</span>

                    <svg-icon icon-class="clock" class="ml10 fz14" style="color: rgb(135,212,237)" />
                    <span>{{ blog.issueTime }}</span>

                    <div class="b-c-o-right">

                      <svg-icon icon-class="like" class="fz14" />
                      点赞(<span class="b-c-o-r-number">{{ blog.likeNum || 0 }}</span>)

                      <svg-icon icon-class="comment" class="ml7 fz14" />
                      评论(<span class="b-c-o-r-number">{{ blog.commentNum || 0 }}</span>)

                      <svg-icon icon-class="view" class="ml7 fz14"/>
                      浏览(<span class="b-c-o-r-number">{{ blog.viewNum || 0 }}</span>)
                    </div>
                  </div>

                </div>
            </el-card>

            <el-empty v-if="blogList.length === 0" description="本站目前没有博客文章，给您带来了不愉快的体验，很抱歉！"></el-empty>
          </template>
        </el-skeleton>

      </div>

      <!-- 底部分页插件 -->
      <blog-paging v-show="blogList.length !== 0"
                   :data-load="dataLoad" :page-size="pageSize"
                   :page-index="pageIndex" :total-num="totalNum"
                   @page-change="pageChangeHandle" @current-change="currentChangeHandle" />
    </el-col>

    <!-- 右侧- -->
    <transition name="el-zoom-in-center">
      <el-col v-show="rightToolVisible" :span="5" class="b-right">
        <!-- 博客搜索 -->
        <div class="module">
          <div class="header">
            <svg-icon icon-class="search" class="fz15" />
            <span class="title">搜索</span>
            <el-tooltip effect="light" :content="searchButtonTitle" placement="right">
              <svg-icon @click="searchVisibleHandle" icon-class="up-arrow"
                        :class="searchVisible ? '' : 'active'" class="arrow-icon fz15" />
            </el-tooltip>

          </div>
          <el-collapse-transition>
            <div v-show="searchVisible" class="search-content">
              <el-input v-model="searchBlog" size="small" clearable @clear="searchBlogHandle(false)" placeholder="输入文章标题或序言" class="input-with-select">
                <el-button slot="append" :disabled="dataLoad" @click="searchBlogHandle(true)" icon="el-icon-search"></el-button>
              </el-input>
            </div>
          </el-collapse-transition>
        </div>

        <!-- 排行展示 -->
        <div class="module">

          <div class="header">
            <span class="title list" :class="{ 'active': sortIndex === 0, 'load': sortDataLoad }"
                  @click="sortIndexHandle(0)">热门博客</span>
            <span class="title list" :class="{ 'active': sortIndex === 1, 'load': sortDataLoad }"
                  @click="sortIndexHandle(1)">今日发布</span>
            <span class="title list" :class="{ 'active': sortIndex === 2, 'load': sortDataLoad }"
                  @click="sortIndexHandle(2)">网站推荐</span>
            <el-tooltip effect="light" :content="sortButtonTitle" placement="right">
              <svg-icon @click="sortVisibleHandle" icon-class="up-arrow"
                        :class="sortVisible ? '':'active'" class="arrow-icon fz15" />
            </el-tooltip>
          </div>

          <el-skeleton :loading="sortDataLoad" :rows="10" :throttle="200" animated>
            <template>

              <el-collapse-transition>

                <div v-show="sortVisible" class="sort-content">
                  <!-- 热门博客 -->
                  <div v-show="sortIndex === 0">
                    <div v-for="(hotBlog, index) in hotBlogList" @click="toBlogDetailHandle(hotBlog.blogId)" class="sort-item">
                      <span class="item-number fz14" :style="{ 'background': sortColorList[index] }">{{ index + 1 }}</span>
                      <el-tooltip v-if="hotBlog.title.length > 16" effect="light" :content="hotBlog.title" placement="bottom">
                        <span class="item-title fz14">{{ hotBlog.title }}</span>
                      </el-tooltip>
                      <span v-else class="item-title fz14">{{ hotBlog.title }}</span>

                      <el-tooltip v-if="hotBlog.view >= 1000000000" class="item" effect="light" :content="hotBlog.viewNum.toString()" placement="bottom">
                        <span class="item-view fz14">{{ hotBlog.viewNum }}</span>
                      </el-tooltip>
                      <span v-else class="item-view fz14">{{ hotBlog.viewNum }}</span>
                    </div>

                    <el-empty v-if="hotBlogList.length === 0" :image-size="100"
                              description="热门博客列表为空，浏览可使博客变热门！"></el-empty>
                  </div>
                  <!-- 今天排行 -->
                  <div v-show="sortIndex === 1">
                    <div v-for="(nowBlog, index) in nowBlogList" @click="toBlogDetailHandle(nowBlog.blogId)" class="sort-item">
                      <span class="item-number fz14" :style="{'background-color': sortColorList[index] }">{{ index + 1 }}</span>
                      <el-tooltip v-if="nowBlog.title.length > 16" class="item" effect="light" :content="nowBlog.title" placement="bottom">
                        <span class="item-title fz14">{{ nowBlog.title }}</span>
                      </el-tooltip>
                      <span v-else class="item-title fz14">{{ nowBlog.title }}</span>

                      <el-tooltip class="item" effect="light" :content="nowBlog.time" placement="right">
                        <span class="item-time fz14">{{ timeSplit(nowBlog.time) }}</span>
                      </el-tooltip>

                    </div>

                    <el-empty v-if="nowBlogList.length === 0" :image-size="100"
                              description="今日没有新发布的博客"></el-empty>
                  </div>
                  <!-- 网站推荐 -->
                  <div  v-show="sortIndex === 2">
                    <div v-for="(blog, index) in recommendSortList" @click="toBlogDetailHandle(blog.blogId)" class="sort-item">
                      <span class="item-number fz14" :style="{'background-color': sortColorList[index] }">{{ index + 1 }}</span>
                      <el-tooltip v-if="blog.title.length > 16" class="item" effect="light" :content="blog.title" placement="bottom">
                        <span class="item-recommend fz14">{{ blog.title }}</span>
                      </el-tooltip>
                      <span v-else class="item-recommend fz14">{{ blog.title }}</span>
                    </div>

                    <el-empty v-if="recommendSortList.length === 0" :image-size="100"
                              description="没有博客被推荐查看"></el-empty>
                  </div>
                </div>
              </el-collapse-transition>

            </template>
          </el-skeleton>
        </div>

        <!-- 标签数量列表 -->
        <div class="module">
          <div class="header">
            <svg-icon icon-class="label" class="fz15" />
            <span class="title">标签</span>
            <span @click="tagChangeHandle(undefined, 0)" class="link fz15 ml10">ALL</span>
            <el-tooltip effect="light" :content="tagButtonTitle" placement="right">
              <svg-icon @click="tagVisibleHandle" icon-class="up-arrow"
                        :class="tagVisible ? '':'active'" class="arrow-icon fz15" />
            </el-tooltip>

          </div>

          <el-skeleton :loading="tagDataLoad" :rows="4" :throttle="200" animated>
            <template>

              <el-collapse-transition>
                <div v-show="tagVisible" class="tag-content">

                  <div v-for="(tag, index) in tagSortList" :key="tag.tagId" @click="tagChangeHandle(tag.tagId, index)" class="tag">
                    <span class="tag-name" :class="'tag-name' + index">
                      {{ tag.tagName }}
                    </span>
                    <span class="tag-num" :class="'tag-num' + index">
                      {{ tag.num }}
                    </span>
                  </div>

                  <el-empty v-if="tagSortList.length === 0" :image-size="100"
                            description="博客引用标签列表为空"></el-empty>
                </div>
              </el-collapse-transition>

            </template>
          </el-skeleton>

        </div>

        <!-- 站点统计 -->
        <div class="module">
          <div class="header">
            <svg-icon icon-class="stats" class="fz15" />
            <span class="title">站点统计</span>
            <el-tooltip effect="light" :content="siteStatsButtonTitle" placement="right">
              <svg-icon @click="siteStatsHandle" icon-class="up-arrow"
                        :class="siteStatsVisible ? '':'active'" class="arrow-icon fz15" />
            </el-tooltip>

          </div>
          <el-skeleton :loading="statsDataLoad" :rows="5" :throttle="200" animated>
            <template>
              <el-collapse-transition>
                <div v-show="siteStatsVisible" class="stats-content">

                  <div class="stats-item">
                    <span style="color: #3b8070" class="s-title">博客数量: </span>
                    <span class="s-num">{{ stats.issueBlogNum || 0}}</span>
                  </div>
                  <div class="stats-item">
                    <span style="color: #0e92b3" class="s-title">点赞数量: </span>
                    <span class="s-num">{{ stats.allBlogLikeNum || 0}}</span>
                  </div>
                  <div class="stats-item">
                    <span style="color: #4A9946" class="s-title">评论数量: </span>
                    <span class="s-num">{{ stats.allBlogCommentNum || 0}}</span>
                  </div>
                  <div class="stats-item">
                    <span style="color: #008489" class="s-title">浏览数量: </span>
                    <span class="s-num">{{stats.allBlogViewNum || 0}}</span>
                  </div>
                  <div class="stats-item">
                    <span style="color: brown" class="s-title">用户数量: </span>
                    <span class="s-num">{{ stats.commonUserNum || 0}}</span>
                  </div>
                  <div class="stats-item">
                    <span style="color: firebrick" class="s-title">在线用户: </span>
                    <span class="s-num">{{ stats.userOnLineNum || 0}}</span>
                  </div>
                </div>
              </el-collapse-transition>
            </template>
          </el-skeleton>

        </div>

        <!-- 图片 -->
        <div class="module">
          <div class="image-header" style="">
            <img @click="imageChangeHandle" :src="imageUrl" class="image">
          </div>
        </div>

        <!-- 诗意文字 -->
        <div v-if="!!poetry" class="module" >
          <div>
            <!-- 水平显示 -->
            <div v-if="poetry.vertical === 0" class="level-content">
              <div v-for="(field, index) in poetry.dataList" :key="'p' + index" :class="index === 0 ? 'l-c-title' : 'l-c-item'">
                {{ field }}
              </div>
            </div>
            <!-- 垂直显示 -->
            <div  v-else class="vertical-content">
              <div v-for="(field, index) in poetry.dataList" v-html="verticalHandle(index, field)" :key="'p' + index" :class="index === 0 ? 'v-c-title' : 'v-c-item'">
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </transition>

    <el-col :span="3">&nbsp;</el-col>
  </el-row>

</template>

<script>
  import { sortColorList } from "assets/js/color";
  import { scrollToTop } from "assets/js/scrollToTop";
  import BlogPaging from "@/components/blog/blog-paging";
  import Fingerprint2 from 'fingerprintjs2'

  /*
    博客展示端首页面
   */
  export default {
    components: { BlogPaging },
    layout: 'default',
    name: 'blog-page-index',
    data() {
      return {
        // 博客数组
        blogList: [],
        // 当前展示页码
        pageIndex: 1,
        // 当前页显示个数
        pageSize: 8,
        // 当前博客数量
        totalNum: 0,
        // 没有博客展示内容
        zeroBlogTitle: '本站目前没有博客文章，给您带来了不愉快的体验，很抱歉！',
        // 博客列表数据是否正在加载[true-加载 false-不加载]
        dataLoad: false,
        // 按钮是否可点击
        buttonVisible: false,
        // 是否显示右侧列
        rightToolVisible: true,
        // 博客排序类型[0-最新 1-浏览最多 2-点赞最多]
        blogSortIndex: 0,
        // 是否显示右侧列按钮提示文字
        rightToolTitle: '关闭右侧工具',
        // 是否显示搜索框
        searchVisible: true,
        // 是否显示搜索框按钮提示文字
        searchButtonTitle: '关闭搜索框',
        // 搜索博客输入框绑定内容
        searchBlog: '',
        // 排行列表是否加载[false-不加载 true-加载]
        sortDataLoad: false,
        // 是否显示排行列表
        sortVisible: true,
        // 是否显示排行列表按钮提示文字
        sortButtonTitle: '关闭排行列表',
        // 被选中的排行下标[0-热门博客 1-今天浏览 2-网站推荐]
        sortIndex: 0,
        // 阅读数排行前10的博客
        hotBlogList: [],
        // 今日发布的前10篇最新博客
        nowBlogList: [],
        // 网站推荐最新前10篇博客
        recommendSortList: [],
        // 标签列表是否加载[false-不加载 true-加载]
        tagDataLoad: false,
        // 是否显示标签列表
        tagVisible: true,
        // 是否显示标签列表按钮提示文字
        tagButtonTitle: '关闭标签列表',
        // 数量排行前10的标签数组
        tagSortList: [],
        // 站点统计是否加载[false-不加载 true-加载]
        statsDataLoad: false,
        // 是否显示站点统计
        siteStatsVisible: true,
        // 是否显示站点统计按钮提示文字
        siteStatsButtonTitle: '关闭站点统计',
        // 站点统计信息对象
        stats: {
          issueBlogNum: undefined,
          allBlogLikeNum: undefined,
          allBlogCommentNum: undefined,
          allBlogViewNum: undefined,
          commonUserNum: undefined,
          userOnLineNum: undefined
        },
        // 站点图片
        imageUrl: 'https://picsum.photos/id/101/350/300',
        // 用户诗意文字列表是否正在加载[false-不加载 true-加载]
        poetryDataLoad: false,
        // 用户诗意文字信息
        poetry: undefined,
      }
    },
    computed: {
      // 排序颜色列表
      sortColorList() {
        return sortColorList
      }
    },
    /*asyncData( { app, params, error} ) {
      // console.log("11")
      // console.log("参数： ", params)
      return app.$axios.$post('/index/blog/list', { word: '', sortType: 0, page: 1, limit: 10 })
        .then(({ page }) => {
          return {
            blogList: page.list,
            totalNum: page.totalNum
          }
        })
        .catch(() => {})
    },*/
    created() {
      if(process.client) {

        // this.getBlogList()
        //
        // this.getSortBlogListHandle()
        //
        // this.getTagSortListHandle()
        //
        // this.getStatsInfoHandle()
        //
        // this.getUserPoetryListHandle()

        if (true) {
          Fingerprint2.get(function(components) {
            const values = components.map(function(component,index) {
              if (index === 0) { //把微信浏览器里UA的wifi或4G等网络替换成空,不然切换网络会ID不一样
                return component.value.replace(/\bNetType\/\w+\b/, '')
              }
              return component.value
            })
            // 生成最终id murmur
            const murmur = Fingerprint2.x64hash128(values.join(''), 31);
            console.log('浏览器指纹码：'+murmur )
          })
        }
      }
    },
    methods: {
      // 上下翻页操作
      pageChangeHandle(bool) {  // bool => false：上一页 true：下一页
        if (bool) {
          this.pageIndex++
        } else {
          this.pageIndex--
        }
        this.getBlogList()


      },
      // 点击特定页码操作
      currentChangeHandle(index) {
        console.log("点击页码: ", index)
        this.pageIndex = index

        this.getBlogList()
      },
      // 跳转至博客详细页面操作
      toBlogDetailHandle(blogId) {
        // console.log("blogId = ", blogId)
        // this.$router.push({ name: 'blog', params: { blogId } })
        this.$router.push({ name: 'blog-blogId', params: { blogId } })
      },
      // 博客排序类型处理事件
      blogSortHandle(index) {
        if (this.blogSortIndex === index) {
           return
        }
        this.blogSortIndex = index
        this.pageIndex = 1

        this.getBlogList()
      },
      // 是否显示右侧工具栏按钮处理事件
      rightToolHandle() {
        this.rightToolVisible = !this.rightToolVisible
        this.rightToolTitle = this.rightToolVisible ? '关闭右侧工具栏' : '打开右侧工具栏'
      },
      // 是否显示搜索框处理事件
      searchVisibleHandle() {
        this.searchVisible = !this.searchVisible
        this.searchButtonTitle = this.searchVisible ? '关闭搜索框' : '显示搜索框'
      },
      /**
       * 博客检索事件
       * @param {boolean} bool 检索方式[true-输入检索内容 false-清空检索内容]
       */
      searchBlogHandle(bool) {
        if (bool && !this.searchBlog) {
          this.notify('info', '温馨提示', '请输入内容后再进行查询。')
          return
        }
        this.pageIndex = 1

        this.getBlogList()
      },
      // 获取博客列表事件
      getBlogList() {
        let indexVo = {
          word: this.searchBlog,
          sortType: this.blogSortIndex,
          page: this.pageIndex,
          limit: this.pageSize
        }
        // 博客列表数据加载
        this.dataLoad = true
        this.$axios.$post('/index/blog/list', indexVo)
          .then(({ data:page }) => {
            // 回到顶部
            scrollToTop()

            this.blogList = page.list
            this.totalNum = page.totalNum
          })
          .catch(() => {})
          .finally(() => {
            // 博客列表数据加载结束
            this.dataLoad = false
          })
      },
      // 是否显示排序列表处理事件
      sortVisibleHandle() {
        this.sortVisible = !this.sortVisible
        this.sortButtonTitle = this.sortVisible ? '关闭排行列表' : '打开排序列表'
      },
      // 排序列表类型下标点击
      sortIndexHandle(index) {
        if (this.sortDataLoad) {
          return;
        }
        if (this.sortIndex === index) {
          return
        }
        this.sortIndex = index

        this.getSortBlogListHandle()
      },
      // 获取热门博客、今日排行和网站推荐博客列表
      getSortBlogListHandle() {
        // 博客排行列表数据加载
        this.sortDataLoad = true
        this.$axios.$get('/index/sort/list', { params: { sortType: this.sortIndex }})
          .then(({ data }) => {
            if (!!data) {
              switch (this.sortIndex) {
                case 0:
                  this.hotBlogList = data
                  break
                case 1:
                  this.nowBlogList = data
                  break
                case 2:
                  this.recommendSortList = data
                  break
              }
            }
          })
          .catch(() => {})
          .finally(() => {
            // 博客排行列表数据加载结束
            this.sortDataLoad = false
          })
      },
      // 是否显示标签列表处理事件
      tagVisibleHandle() {
        this.tagVisible = !this.tagVisible
        this.tagButtonTitle = this.tagVisible ? '关闭标签列表' : '打开标签列表'
      },
      // 获取标签排行前十列表
      getTagSortListHandle() {
        // 标签排行列表数据加载
        this.tagDataLoad = true
        this.$axios.$get('/index/tag/list')
          .then(({ data }) => {
            if (!!data) {
              this.tagSortList = data
            }
          })
          .catch(() => {})
          .finally(() => {
            // 标签排行列表数据加载结束
            this.tagDataLoad = false
          })
      },
      //
      /**
       * 标签排序列表被点击事件
       * @param {string} tagId 点击的标签id（点击‘all’，该值为undefined）
       * @param {number} index 点击的标签所在下标
       */
      tagChangeHandle(tagId, index) {
        this.$router.push({ name: 'tag', params: { tagId: tagId, tagIndex: index.toString() }})
      },
      // 是否显示站点统计处理事件
      siteStatsHandle() {
        this.siteStatsVisible = !this.siteStatsVisible
        this.siteStatsButtonTitle = this.siteStatsVisible ? '关闭站点统计' : '打开站点统计'
      },
      // 获取网站统计信息
      getStatsInfoHandle() {
        // 网站统计数据加载
        this.statsDataLoad = true
        this.$axios.$get('/index/stats')
          .then(({ data:webStats }) => {
            this.stats = webStats
          })
          .catch(() => {})
          .finally(() => {
            // 网站统计数据加载结束
            this.statsDataLoad = false
          })
      },
      // 站点图片切换处理事件
      imageChangeHandle() {
        this.imageUrl = `https://picsum.photos/id/${ Math.ceil(Math.random()*1084) }/350/300`
        this.$notify({
          title: '成功',
          message: '图片切换成功',
          type: 'success'
        });
      },
      // 获取用户诗意文字列表
      getUserPoetryListHandle() {
        // 用户处于在线状态
        if (this.$store.state.user.status) {
          // 用户诗意文字数据加载
          this.poetryDataLoad = true
          this.$axios.$get('/sys/poetry/info')
            .then(({ data:poetry }) => {
              // console.log("poetry = ", poetry)
              this.poetry = poetry
            }).catch(() => {})
            .finally(() => {
              // 用户诗意文字数据加载结束
              this.poetryDataLoad = false
            })
        }
      },
      // 时间字符串分割（只返回时分秒）
      timeSplit(time) {
        // 不是字符串时间
        if (typeof time != 'string') {
          return ''
        }
        if (time.length === 0) {
          return ''
        }
        return time.split(' ')[1]
      },
      // 文字列表显示方式改变事件
      verticalHandle(index, value) {
        let res = ''
        for (let i = 0; i < value.length; i++) {
          if (i === 0) {
            res += value[i]
          } else {
            res += '<br>' + value[i]
          }
        }
        return res
      },

    }
  }
</script>

<!--
  css字符对应
  b -> blog
  c -> content
  h -> header
  o -> other
-->
<style>
  .blog-container {
    margin-top: 25px;
    margin-bottom: 20px;
  }
</style>

<!-- 文章列表头部样式 -->
<style scoped>
  .b-left {
    padding-left: 10px; padding-right: 20px;
    transition: width .7s;
  }
  .b-left .b-header {
    height: 40px;
    line-height: 40px;
    border-bottom: 3px solid #c4d7d6;
  }
  .b-left .b-header .b-h-left {
    margin-left: 5px;
    float: left;
  }
  .b-left .b-header .b-h-left .title {
    font-size: 17px;
    font-weight:bold;
  }
  .b-left .b-header .b-h-right {
    padding: 0 5px;
    text-align: right;
  }
  .b-h-right .sort-item {
    margin-right: 7px;
    cursor: pointer;
    user-select: none;
    transition: color .28s;
  }
  .b-h-right .sort-item.active {
    color: rgb(255, 51, 0);
  }
  .b-h-right .sort-item.load {
    cursor: not-allowed;
    color: #CCC;
  }
  .b-h-right .arrow-icon-right {
    font-size: 15px;
    margin-left: 5px;
    transform: rotate(90deg);
    transition: transform .7s;
    cursor: pointer;
  }
  .b-h-right .arrow-icon-right.active {
    transform: rotate(270deg);
  }
</style>

<style scoped>
.b-left .blog {
  margin-top: 20px;
  cursor: pointer;
}
.blog .b-image .image {
  width: 100%;
  height: 160px;
}
.blog .b-content {
  padding-left: 10px;
  font-size: 14px;
}
.b-content .b-c-title {
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-size: 18px;
  font-weight:bold;
  display :inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.b-c-title .hot-blog-icon {
  font-size: 25px;
  margin-right: 5px
}
.b-c-title .elite-blog-icon {
  font-size: 20px;
  margin-right: 5px
}
.b-c-title .title {
  line-height: 30px;
  font-family: SimHei,serif;
  text-decoration: none;
  color: black;
  transition: color .28s;
}
.b-content .b-c-preface {
  line-height: 20px;
  margin-top: 5px;
  text-indent: 2em;
  letter-spacing: 1px;
}
.b-content .b-c-author, .b-content .b-c-other {
  margin-top: 10px;
}
.b-c-author .author-name {
  font-family: SimHei,serif;
}
.b-c-other .b-c-o-right {
  float: right;
}
.b-c-other .b-c-o-right .b-c-o-r-number {
  color: #0e92b3;
}
</style>

<!-- 右侧工具栏样式 -->
<style scoped>
  .b-right .module {
    margin-top: 20px;
  }
  .b-right .module:nth-child(1) {
    margin-top: 0;
  }
  .b-right .header {
    height: 40px;
    line-height: 40px;
    border-bottom: 2px solid #c4d7d6;
  }
  .b-right .title {
    font-size: 15px;
    font-weight:bold;
  }
  .b-right .link {
    cursor: pointer;
  }
  .b-right .link:hover {
    color: #3b8070;
  }
  .b-right .arrow-icon {
    height: 35px;
    line-height: 35px;
    margin-right: 10px;
    cursor: pointer;
    float: right;
    transition: transform .28s;
  }
  .b-right .arrow-icon.active {
    transform: rotate(180deg);
  }
  .b-right .search-content {
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #c4d7d6;
    border-radius: 5px;
  }
  .b-right .list {
    padding: 10px 15px;
    cursor: pointer;
  }
  .b-right .list.active {
    transition: all .28s;
    background-color: #c4d7d6;
    border-radius: 5px 5px 0 0;
  }
  .b-right .list.load {
    cursor: not-allowed;
    color: #CCC;
  }
  .b-right .sort-content {
    padding-left: 5px;
    cursor: pointer;
  }
  .sort-content .sort-item {
    height: 30px;
    line-height: 30px;
    margin-top: 10px;
  }
  .sort-item .item-number {
    float: left;
    line-height: 15px;
    padding: 5px 8px;
    margin-top: 2px;
    display: inline-block;
    border-radius: 5px;
    text-align: center;
  }
  .sort-item .item-title {
    width: 190px;
    margin-left: 5px;
    display :inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sort-item .item-view {
    width: 70px;
    float: right;
    margin-right: 5px;
    text-align: right;
    display :inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sort-item .item-time {
    width: 72px;
    float: right;
    margin-right: 5px;
    text-align: right;
    display :inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sort-item .item-recommend {
    width: calc(100% - 40px);
    margin-left: 5px;
    display :inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sort-item:hover span {
    color: #1ba784;
  }
  .b-right .stats-content {
    padding-left: 5px;
  }
  .stats-content .stats-item {
    margin: 10px 0;
  }
  .stats-item .s-title {
    font-size: 14px;
    margin-right: 5px;
  }
  .stats-item .s-num {
    font-size: 14px;
    /*float: right;*/
  }
  .module .image-header {
    height: 300px;
    width: 100%;
    padding: 15px 10px;
    border-top: 2px solid #c4d7d6;
    border-bottom: 2px solid #c4d7d6;
  }
  .image-header .image {
    width: 100%;
    height: 100%;
    cursor: pointer;
    border-radius: 3px;
  }
  .module .vertical-content {
    display: flex;
  }
  .vertical-content .v-c-title {
    width:25px; text-align: center; font-size: 16px;font-weight:bold; margin-left: 5px;
  }
  .vertical-content .v-c-item {
    width:25px; text-align: center; font-size: 14px;
  }
  .level-content .l-c-title {
    text-align: center; font-size: 16px;font-weight:bold;
  }
  .level-content .l-c-item {
    font-size: 14px; margin-left: 5px; margin-top: 10px;
  }
</style>

<!-- 右侧工具栏-标签排行 -->
<style scoped>
.b-right .tag-content {
  padding-left: 5px;
}
.tag-content .tag {
  margin-right: 10px;
  margin-top: 17px;
  border-radius: 5px;
  display: inline-block;
  cursor: pointer;
}
.tag .tag-name {
  font-size: 14px;
  padding: 5px 15px;
  border-right: none !important;
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
}
.tag .tag-num {
  font-size: 14px;
  padding: 5px 7px;
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
  position: relative;
}

.tag .tag-num0:before, .tag .tag-num1:before, .tag .tag-num2:before, .tag .tag-num3:before,
.tag .tag-num4:before, .tag .tag-num5:before, .tag .tag-num6:before, .tag .tag-num7:before,
.tag .tag-num8:before, .tag .tag-num9:before {
  border-left: transparent !important;
  border-bottom: transparent !important;
  content: '';
  position: absolute;
  top: 9px;
  left: -6px;
  width: 10px;
  height: 10px;
  transform:rotate(225deg);
  -webkit-transform: rotate(225deg);
  background-color: white;
}

/* 第一个 */
.tag .tag-num0:before {
  border: 1px solid #ce5777
}
.tag .tag-name0, .tag .tag-num0 {
  border: 1px solid #ce5777
}
/* 第二个 */
.tag .tag-num1:before {
  border: 1px solid #45b787
}
.tag .tag-name1, .tag .tag-num1 {
  border: 1px solid #45b787
}
/* 第三个 */
.tag .tag-num2:before {
  border: 1px solid #fa7e23
}
.tag .tag-name2, .tag .tag-num2 {
  border: 1px solid #fa7e23
}
/* 第四个 */
.tag .tag-num3:before {
  border: 1px solid #aa6a4c
}
.tag .tag-name3, .tag .tag-num3 {
  border: 1px solid #aa6a4c
}
/* 第五个 */
.tag .tag-num4:before {
  border: 1px solid #579572
}
.tag .tag-name4, .tag .tag-num4 {
  border: 1px solid #579572
}
/* 第六个 */
.tag .tag-num5:before {
  border: 1px solid #15559a
}
.tag .tag-name5, .tag .tag-num5 {
  border: 1px solid #15559a
}
/* 第七个 */
.tag .tag-num6:before {
  border: 1px solid #673424
}
.tag .tag-name6, .tag .tag-num6 {
  border: 1px solid #673424
}
/* 第八个 */
.tag .tag-num7:before {
  border: 1px solid #619ac3
}
.tag .tag-name7, .tag .tag-num7 {
  border: 1px solid #619ac3
}
/* 第九个 */
.tag .tag-num8:before {
  border: 1px solid #ec7696
}
.tag .tag-name8, .tag .tag-num8 {
  border: 1px solid #ec7696
}
/* 第十个 */
.tag .tag-num9:before {
  border: 1px solid #134857
}
.tag .tag-name9, .tag .tag-num9 {
  border: 1px solid #134857
}
</style>

